<template>
  <div class="allbox">
    <!-- 背景 -->
    <img src="@/images/allbj.png" alt="" class="allbjimg" />
    <!-- 实验结束标题 -->
    <img src="@/images/alltitle.png" alt="" class="alltitle" />
    <!-- 实验结束主题框 -->
    <div class="allmainbox">
      <!-- 背景 -->
      <img src="@/images/allmainbj.png" alt="" class="allmainbj" />
      <!-- 主题 内容内在 -->
      <!-- <div class="allmain">
        <div class="allmainitem">
          <div class="allmainitemimg"></div>
          <div class="allmainitemname">名字</div>
        </div>
      </div> -->
      <div class="allmain">
        <div class="allmainitem">
          <img src="@/images/bz1.jpg" alt="选择检测设备及模体" />
          <p>1.选择检测设备及模体</p>
        </div>
        <div class="arrow">
          <img src="@/images/image_icon_arrow-right.png" alt="" />
        </div>
        <div class="allmainitem">
          <img src="@/images/bz2.jpg" alt="放置检测设备及模体" />
          <p>2.放置检测设备及模体</p>
        </div>
        <div class="arrow">
          <img src="@/images/image_icon_arrow-right.png" alt="" />
        </div>
        <div class="allmainitem">
          <img src="@/images/bz3.jpg" alt="调节SID" />
          <p>3.调节SID</p>
        </div>
        <div class="arrow">
          <img src="@/images/image_icon_arrow-right.png" alt="" />
        </div>
        <div class="allmainitem">
          <img src="@/images/bz4.jpg" alt="登录工作站" />
          <p>4.登录工作站</p>
        </div>
        <div class="arrow">
          <img src="@/images/image_icon_arrow-right.png" alt="" />
        </div>
        <div class="allmainitem">
          <img src="@/images/bz5.jpg" alt="设置曝光参数" />
          <p>5.设置曝光参数</p>
        </div>
        <div class="arrow">
          <img src="@/images/image_icon_arrow-right.png" alt="" />
        </div>
        <div class="allmainitem">
          <img src="@/images/bz6.jpg" alt="记录数值" />
          <p>7.记录数值</p>
        </div>
        <div class="arrow">
          <img src="@/images/image_icon_arrow-left.png" alt="" />
        </div>
        <div class="allmainitem">
          <img src="@/images/bz7.jpg" alt="曝光" />
          <p>6.曝光</p>
        </div>
      </div>
    </div>
    <!-- 重新开始实验盒子 -->
    <div class="alltoolbox">
      <div class="tool alltoolitem" @click="start">
        <img src="@/images/cxks.png" alt="" class="normal" />
        <img src="@/images/cxksac.png" alt="" class="active" />
      </div>
      <div class="tool alltoolitem alltoolitems" @click="closeFn">
        <img src="@/images/tcsy.png" alt="" class="normal" />
        <img src="@/images/tcsyac.png" alt="" class="active" />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {}
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    start() {
      this.$router.push({
        name: 'index'
      })
    },
    closeFn() {
      if (
        navigator.userAgent.indexOf('Firefox') != -1 ||
        navigator.userAgent.indexOf('Chrome') != -1
      ) {
        window.location.href = 'about:blank'
        window.close()
      } else {
        window.opener = null
        window.open('', '_self')
        window.close()
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>
<style scoped>
.allbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.allbjimg {
  width: 1920px;
  height: 100%;
}
.alltitle {
  width: 320px;
  height: 96px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 20px;
}
.allmainbj {
  width: 1836px;
  height: 677px;
}
.allmainbox {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 150px;
}
.alltoolbox {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 8px;
  align-items: center;
  justify-content: center;
}
.alltoolbox img {
  width: 204px;
  height: 84px;
}
.alltoolitem {
  margin: 0px 10px;
}
.alltoolitems img {
  height: 80px;
  margin-top: 5px;
}

/* 流程容器：右对齐排列，换行时从右侧开始 */
.allmain {
  display: flex;
  flex-wrap: wrap; /* 步骤过多时换行 */
  justify-content: flex-end; /* 右对齐，让每行从右侧开始排列 */
  align-items: center; /* 垂直居中对齐 */
  /* ;  */
  gap: 40px;
  width: 1772px; /* 限制最大宽度，方便观察换行效果 */
  position: absolute;
  top: 150px;
  left: 32px;
  padding-right: 60px;
  box-sizing: border-box; /* 内边距和边框不占据额外空间 */

  /*   max- */
}

/* 单个步骤项 */
.allmainitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 步骤图片 */
.allmainitem img {
  width: 194px;
  height: 124px;
  object-fit: cover;
  margin-bottom: 8px;
  border: 2px solid #213047;
}

/* 步骤标题 */
.allmainitem p {
  font-size: 22px;
  color: #313d53;
  margin: 10px 0;
}

/* 箭头：使用CSS绘制三角形 */
.arrow {
  width: 50px;
  height: 50px;
  margin-top: -50px;
}
.arrow img {
  width: 50px;
  height: 50px;
}
/* 移除最后一个步骤后的箭头 */
.allmainitem:last-child + .arrow {
  display: none;
}
</style>
